Hero page title - required
- The hero page title should be descriptive of the purpose of the page. For example 'Protecting the Great Barrier Reef' is better than 'Great Barrier Reef' because it shows exactly what the page is about—and clarifies that it doesn’t include tourism etc.
- A subtitle is optional and can be used to further explain the page purpose. The subtitle will appear in search results so make sure that it adds extra information about the page that will help the user.
- If the hero page title and subtitle provide sufficient colour contrast against the hero image, the background may be removed. A button may also be added beneath the subtitle to guide a user to take a desired action.
Full-width hero image - required
- If a hero image is used, there is the option to hide it on mobile. If no hero image is uploaded, the fallback is a grey solid banner.
- For screen sizes 768px and up (
md,lg, andxlbreakpoints), it has a fluid width (resizes based on screen size) and a set height of 361px. - For screen sizes 767px and down (
smandxsbreakpoints), it has both a fluid width and height (resizes based on screen size). - The recommended minimum image size is 1600 x 361 pixels. This is based on a standard-resolution display with a 1:1 pixel density (or @1x).
Grid of cards - required
- At least one row of cards are required for this page model. Multiple groups of cards may also be used to categorise topics.
- See the card component for additional guidance including recommended minimum image size.
Additional information panels - optional
- These 3 panels are optional and should be used for additional information or items that might normally be put in an aside, e.g. social media, popular topics, useful resources, or news items.